<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugins/angularjs/angular.min.js"></script>
    <!-- 分页组件开始 -->
    <script src="../plugins/angularjs/pagination.js"></script>
    <link rel="stylesheet" href="../plugins/angularjs/pagination.css">
    <!-- 分页组件结束 -->

    <script type="text/javascript">
        //引入分页模块
        var app = angular.module('brandApp', ['pagination']);//定义模块
        app.controller('brandController', function ($scope, $http) {
            $scope.searchEntity = {};//定义搜索对象
//条件查询
            $scope.search = function (page, rows) {
                page = $scope.paginationConf.currentPage;
                rows = $scope.paginationConf.itemsPerPage;
                $http.post('../admin/brand/search?page=' + page + '&rows=' + rows, $scope.searchEntity).success(
                    function (response) {
                        $scope.paginationConf.totalItems = response.total;//总记录数
                        $scope.brands = response.rows;//给列表变量赋值
                    }
                );
            }

            //重新加载列表 数据
            $scope.findAll = function () {
                //切换页码
                // $scope.search($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
                $scope.search($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
            }
//分页控件配置
            $scope.paginationConf = {
                currentPage: 1,
                totalItems: 10,
                itemsPerPage: 10,
                perPageOptions: [10, 20, 30, 40, 50],
                onChange: function () {
                    $scope.findAll();//重新加载
                }
            };
//分页
            $scope.findPage = function (page, rows) {
                $http.get('../admin/brand/findPage?page=' + page + '&rows=' + rows).success(
                    function (response) {
                        $scope.brands = response.rows;
                        $scope.paginationConf.totalItems = response.total;//更新总记录数
                    }
                );
            }

            //读取数据到表单中
            // $scope.findAll = function () {
            //     $http.get('/admin/brand/findAll')
            //         .success(
            //             function (res) {
            //                 $scope.brands = res;
            //             }
            //         );
            // }
            //1、添加数据到数据库中
            //2、修改数据到数据库（id存在时）
            $scope.addBrand = function () {
                let methodName = 'addBrand';//方法名称，默认为添加
                if ($scope.brand.id != null) {
                    //存在id，则说明是从修改按钮点击而来
                    methodName = 'updateBrand';
                }
                $http.post('../admin/brand/' + methodName, $scope.brand).success(function (data) {
                    if (data.success) {
                        $scope.findAll();
                        $scope.brand = {};
                    } else {
                        console.log(data.message);
                    }
                })
            }
            //实现数据查询
            $scope.findById = function (id) {
                $http.get('../admin/brand/findById?id=' + id)
                    .success(function (res) {
                        $scope.brand = res;
                        console.log($scope.brand)
                    })
            }

            //实现批量删除操作
            $scope.selectIds = [];//选中的饿id集合
            $scope.updateSelection = function ($event, id) {
                if ($event.target.checked) {
                    //如果被选中，触发事件
                    $scope.selectIds.push(id);
                    console.log(id)
                    console.log($scope.selectIds)
                } else {
                    let idx = $scope.selectIds.indexOf(id);
                    $scope.selectIds.splice(idx, 1);//删除该下标开始的一个元素
                }
            }
            //与后台交互实现批量删除操作
            $scope.delete = function () {
                //获取选中的复选框
                //获取选中的复选框
                $http.post('../admin/brand/deleteByIds?ids=' + $scope.selectIds).success(
                    function (response) {
                        if (response.success) {
                            $scope.findAll();//刷新列表
                        }
                    }
                );
            }
        });


    </script>
</head>
<!-- 使用分页时去除ng-init="findAll()"-->
<body class="hold-transition skin-red sidebar-mini" ng-app="brandApp" ng-controller="brandController"
      ng-init="findAll()">
<!-- .box-body -->
<div class="box-header with-border">
    <h3 class="box-title">品牌管理</h3>
</div>

<div class="box-body">

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#editModal"><i class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" class="btn btn-default" title="删除" ng-click="delete()"><i
                            class="fa fa-trash-o"></i> 删除
                    </button>
                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">
                <label for="name">
                    <input id="name" class="form-control" ng-model="searchEntity.name"/>
                </label>
                <label for="firstChar">
                    <input id="firstChar" class="form-control" ng-model="searchEntity.firstChar"/>
                </label>
                <div class="btn-group">
                    <button type="button" class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="search()">
                        搜索
                    </button>
                </div>
            </div>
        </div>
        <!--工具栏/-->

        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">品牌ID</th>
                <th class="sorting">品牌名称</th>
                <th class="sorting">品牌首字母</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="brand in brands">
                <td><input type="checkbox" ng-click="updateSelection($event,brand.id)"></td>
                <td>{{brand.id}}</td>
                <td>{{brand.name}}</td>
                <td>{{brand.firstChar}}</td>
                <td class="text-center">
                    <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal"
                            ng-click="findById(brand.id)">修改
                    </button>
                </td>
            </tr>
            </tbody>

        </table>
        <!--数据列表/-->
        <!-- 分页 -->
        <tm-pagination conf="paginationConf"></tm-pagination>


    </div>
    <!-- 数据表格 /-->
</div>
<!-- /.box-body -->

<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">品牌编辑</h3>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>品牌名称</td>
                        <td><input class="form-control" placeholder="品牌名称" ng-model="brand.name"></td>
                    </tr>
                    <tr>
                        <td>首字母</td>
                        <!--ng-model绑定数据-->
                        <td><input class="form-control" placeholder="首字母" ng-model="brand.firstChar"></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="addBrand()">保存
                </button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>